<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/fragment::top">

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="common/fragment::leftmenu"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="common/fragment::header"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <div class="row show-grid">
                                    <div class="col-md-2">
                                        <select class="form-control" id="thresdhold" name="thresdhold" size="1">
                                            <option value="">全部</option>
                                            <option value="1">不报警</option>
                                            <option value="-1">报警</option>

                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <input class="form-control" id="goodname" name="goodname" placeholder="商品名" type="email">
                                    </div>
                                    <div class="col-md-2">
                                            <select class="form-control" id="stockid" name="stockid" size="1">
                                                <option value="">全部</option>
                                                <option th:each="st:${stock}" th:value="${st.id}" th:text="${st.name}">选项 #1</option>

                                            </select>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-success btn-w-md" id="repoinfo-search-btn" type="button">搜索</button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <!--手风琴效果-->
                                    <th:block th:each="summ:${summlist}">
                                        <div th:id="'tab'+${summ.goodPO.id}">
                                            <h4>
                                                <a class="subtabahref" th:href="'subtab'+${summ.goodPO.id}" th:text="'商品: '+${summ.goodPO.name}"></a>
                                                <span class="label label-default" th:text="' 库存:('+${summ.goodcount}+') 备货: ('+${summ.goodspare}+')'">New</span>
                                            </h4>
                                            <div class="sellouttab" th:id="'subtab'+${summ.goodPO.id}">
                                                <table class="table table-bordered ">
                                                    <thead>
                                                    <tr>
                                                        <th hidden="hidden">商品id</th>
                                                        <th>仓库</th>
                                                        <th>商品名称</th>
                                                        <th>商品型号</th>
                                                        <!--    <th>角色图标</th>-->
                                                        <th>商品规格</th>
                                                        <!--                                            <th>包装</th>-->
                                                        <th>库存数量</th>
                                                        <th>库存阈值</th>
                                                        <!--    <th>操作</th>-->
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <!--/*@thymesVar id="sellDetailVOList" type="com.examplemartin.jpademo.pojo.vo.sell.sellDetailVO"*/-->
                                                    <tr class="detail" th:each="detail:${summ.stockinfolist}" th:if="${detail.goodcount gt 0}">
                                                        <td class="goodid" hidden="hidden" th:text="${detail.goodPO.id}">
                                                            商品id
                                                        </td>
                                                        <td th:text="${detail.stockPO.name}">仓库</td>
                                                        <td th:text="${detail.goodPO.name}">商品名称</td>
                                                        <td th:text="${detail.goodPO.spec}">商品型号</td>
                                                        <!--    <th>角色图标</th>-->
                                                        <td th:text="${detail.goodPO.unit}">商品规格</td>
                                                        <td  class="goodcount" th:text="${detail.goodcount}">库存数量</td>
                                                        <td  class="threshold" th:text="${detail.threshold}">库存阈值</td>
                                                    </tr>
                                                    </tbody>

                                                </table>

                                            </div>
                                        </div>
                                    </th:block>

                                    <!--手风琴效果 End-->
                                    <!--<table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            &lt;!&ndash;<th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all">
                                                    <span></span>
                                                </label>
                                            </th>&ndash;&gt;
                                            <th>序号</th>
                                            <th>库名</th>
                                            <th>商品名</th>

                                            <th>商品规格</th>
                                            <th>商品单位</th>
                                            <th>库存阈值</th>
                                            <th>库存数量</th>
                                            <th>备货数量</th>
                                        </tr>
                                        </thead>
                                        <tbody id="repoInfotable" th:each="repoInfo:${repoInfoPOS}">
                                        <tr>
                                            <td th:text="${repoInfoStat.index+1}"></td>
                                            &lt;!&ndash;                      <td hidden="hidden" th:text="${stock.id}"></td>&ndash;&gt;
                                            <td th:text="${repoInfo.stockPO.name}"></td>
                                            <td th:text="${repoInfo.goodPO.name}"></td>

                                            <td th:text="${repoInfo.goodPO.spec}"></td>
                                            <td th:text="${repoInfo.goodPO.unit}"></td>
                                            <td class="threshold" th:text="${repoInfo.threshold}"></td>
                                            <td class="goodcount" th:text="${repoInfo.goodcount}"></td>
                                            <td th:text="${repoInfo.goodspare}"></td>

                                            &lt;!&ndash;<td>
                                              <div class="btn-group">
                                                <a class="btn btn-xs btn-default"
                                                   data-toggle="tooltip"
                                                   th:href="@{'/stock/editstock.do?id='+${stock.id==''?'':stock.id}}" title="编辑">
                                                  <i class="mdi mdi-pencil"></i>
                                                </a>

                                              </div>
                                            </td>&ndash;&gt;
                                        </tr>

                                        </tbody>
                                    </table>-->
                                </div>
                                <!--
                                <ul class="pagination">
                                  <li class="disabled"><span>«</span></li>
                                  <li class="active"><span>1</span></li>
                                  <li><a href="#1">2</a></li>
                                  <li><a href="#1">3</a></li>
                                  <li><a href="#1">4</a></li>
                                  <li class="disabled"><span>...</span></li>
                                  <li><a href="#!">14452</a></li>
                                  <li><a href="#!">14453</a></li>
                                  <li><a href="#!">»</a></li>
                                </ul>
                                -->
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </main>
        <!--End 页面主要内容-->
        <!--End 页面主要内容-->
    </div>
</div>
<div th:replace="common/fragment::tail-script"></div>
<style>
    .modify {
        color: #ff5151;
        font-weight: bolder;
    }
    .hidesubtable {
        display: none;
    }
</style>

<script type="text/javascript">

    $(document).ready(function(){
// 触碰阈值, class=modify
        $('#repoInfotable tr').each(function (i, e) {
            let threshold = $(e).children('.threshold').text()

            let goodcount = $(e).children('.goodcount').text()
            console.log("threshold=" + threshold + "   goodcount=" + goodcount)
            if (parseInt(threshold) >= parseInt(goodcount)) {
                $(e).addClass('modify')
            }

        })

// 搜索
        $('#repoinfo-search-btn').click(function (ev) {
            let thresdhold = $('#thresdhold').val()
            let stockid = $('#stockid').val()
            let goodname = $('#goodname').val()
            console.log(thresdhold)
            console.log(stockid)
            console.log(goodname)
            let str = ''

            if(thresdhold!=''){
                str = '?repostatus='+thresdhold
            }

            if(str == ''){
                if(stockid!=''){
                    str = str + '?stockid='+stockid
                }
            }else{
                if(stockid!=''){
                    str = str + '&stockid='+stockid
                }
            }

            if(str == ''){
                if(goodname!=''){
                    str = str + '?likegoodname='+goodname
                }
            }else{
                if(goodname!=''){
                    str = str + '&likegoodname='+goodname
                }
            }


            window.location.href='/stock/repoinfolist.do'+str

        })
// 屏蔽 a 跳转
        $('.table-responsive a').each(function (i,e) {
                $(e).click(function (event) {
                    event.preventDefault();
                })
        })

// 手风琴各个仓库 页面加载隐藏
        $('.sellouttab').each(function (i, e) {
            $(e).addClass('hidesubtable')
        });
// END手风琴各个仓库 页面加载隐藏


// 渲染 补货
        $('.detail').each(function () {
            let goodcount = $(this).children('.goodcount').text()
            let threshold = $(this).children('.threshold').text()


            if(parseInt(goodcount)<parseInt(threshold)){
                console.log('add class modify'+$(this))
                $(this).addClass('modify')
            }
        })
// END渲染 补货

// 手风琴效果 a标签
        $('.subtabahref').each(function (i, e) {
            $(e).click(function (event) {


                $('.sellouttab').each(function (i, e) {
                    $(e).addClass('hidesubtable')
                })

                let href = $(e).attr('href')
                $('#' + href).removeClass('hidesubtable')

                event.preventDefault();
                return false;
            })
        });
// END手风琴效果 a标签

        });

</script>
</body>
</html>